<template>
    <div>
        <div>
            <el-row>
                <el-col :span="4">
                    <el-input type="text" v-model="fform.title" clearable placeholder="标题\关键词"></el-input>
                </el-col>
                <el-col :span="1">
                    <el-button type="success" @click="getSeckillList">查询</el-button>
                </el-col>
            </el-row>
        </div>
<!--        <el-button type="primary" round size="mini" @click="add()">新增</el-button>-->
        <el-table
            :data='seckillList.list' style="width: 100%">
            <el-table-column prop="id" label="编号">
                <template slot-scope="scope">
                    <span>{{(seckillList.pageNum - 1) * pageSize + scope.$index + 1}}</span>
                </template>
            </el-table-column>

            <el-table-column
                prop="ad_id"
                label="sku ID">
            </el-table-column>

            <el-table-column
                prop="title"
                label="标题">
            </el-table-column>

            <el-table-column
                prop="small_pic"
                label="商品图片">
            </el-table-column>

            <el-table-column
                prop="price"
                label="原价格">
            </el-table-column>

            <el-table-column
                prop="check_time"
                label="审核日期">
            </el-table-column>

            <el-table-column
                prop="status"
                label="审核状态">
                                <template slot-scope="scope">
                                    <el-tag type="success" v-if="scope.row.status === '0'">未审核</el-tag>
                                    <el-tag type="danger" v-if="scope.row.status === '1'">审核通过</el-tag>
                                    <el-tag type="danger" v-if="scope.row.status === '2'">审核不通过</el-tag>
                                </template>
            </el-table-column>

            <el-table-column
                prop="start_time"
                label="开始时间">
            </el-table-column>

            <el-table-column
                prop="end_time"
                label="结束时间">
            </el-table-column>

            <el-table-column
                prop="num"
                label="秒杀商品数">
            </el-table-column>

            <el-table-column
                prop="stock_count"
                label="剩余库存数">
            </el-table-column>

            <el-table-column
                prop="introduction"
                label="描述">

            </el-table-column>

<!--            <el-table-column label="操作" width="200">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button size="mini" @click="edit(scope.row)">修改</el-button><br>-->
<!--                </template>-->
<!--            </el-table-column>-->
        </el-table>

        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="编号" :label-width="formLabelWidth" hidden>
                    <el-input v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="sku ID" :label-width="formLabelWidth" hidden>
                    <el-input v-model="form.ad_id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品图片" :label-width="formLabelWidth">
                    <el-input v-model="form.small_pic" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="原价格" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="审核日期" :label-width="formLabelWidth">
                    <el-input v-model="form.check_time" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="审核状态" :label-width="formLabelWidth">
                    <el-input v-model="form.status" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" :label-width="formLabelWidth">
                    <el-input v-model="form.start_time" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="结束时间" :label-width="formLabelWidth">
                    <el-input v-model="form.end_time" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="秒杀商品数" :label-width="formLabelWidth">
                    <el-input v-model="form.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="剩余库存数" :label-width="formLabelWidth">
                    <el-input v-model="form.stock_count" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input v-model="form.introduction" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <div v-if="title==='新增商品'">
                    <el-button type="primary" @click="save()">保 存</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </div>
<!--                <div v-else>-->
<!--                    <el-button type="primary" @click="update()">确 定</el-button>-->
<!--                    <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--                </div>-->
            </div>
        </el-dialog>

        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.pageNum"
                :page-sizes="[5,10,15,20]"
                :page-size="this.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.seckillList.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
/**
     * 列表
     */
export default {
  name: 'SeckillList',
  data () {
    return {
      title: '新增商品',
      seckillList: {},
      dialogFormVisible: false,
      form: {
        id: '',
        ad_id: '',
        title: '',
        small_pic: '',
        price: '',
        check_time: '',
        status: '',
        start_time: '',
        end_time: '',
        num: '',
        stock_count: '',
        introduction: ''
      },
      fform: {
        title: ''
      },
      formLabelWidth: '120px'
    }
  },
  created () {
    // this.$http.post('tbseckill/seckill/list').then(response => {
    //   console.log(response.data)
    //   this.seckillList = response.data
    // })
    this.getSeckillList()
  },
  /**
     * 删除
     * @param row
     */
  methods: {
    // 分页列表
    getSeckillList () {
      // 获取列表数据
      this.$http.post('tbseckill/seckill/list', {title: this.fform.title, pageNum: this.pageNum, pageSize: this.pageSize}).then(res => {
        // 处理结果，根据自己业务接口返回结构赋值数据
        if (res.code === 20000) {
          this.seckillList = res.data
        }
      })
    },
    // 每页条数发生变化
    handleSizeChange (newPageSize) {
      this.pageSize = newPageSize
      this.getSeckillList()
    },
    // 当前页码发生变化
    handleCurrentChange (newPageNum) {
      console.log('当前页码:', newPageNum)
      this.pageNum = newPageNum
      this.getSeckillList()
    },
    add () {
      this.dialogFormVisible = true
      this.title = '新增商品'
    },
    tableRowClassName ({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    // 新增商品信息
    save () {
      this.$http.post('tbseckill/seckill/save', this.form).then(response => {
        if (response.code === 20000) {
          this.$notify({
            title: '成功',
            message: '新增成功',
            type: 'success'
          })
          location.reload()
        } else {
          this.$notify.error({
            title: '失败',
            message: '新增失败'
          })
        }
      })
    }
    // edit (row) {
    //   this.dialogFormVisible = true
    //   this.title = '编辑商品信息'
    //   this.form = row
    // },
    // // 修改商品信息
    // update () {
    //   this.$http.post('tbseckill/seckill/edit', this.form).then(response => {
    //     if (response.code === 20000) {
    //       this.$notify({
    //         title: '成功',
    //         message: '修改成功',
    //         type: 'success'
    //       })
    //       location.reload()
    //     } else {
    //       this.$notify.error({
    //         title: '失败',
    //         message: '修改失败'
    //       })
    //     }
    //   })
    // }
  }
}
</script>

<style scoped>

</style>
